<template>
	<view class="container" v-if="loadding">
		<!-- <view class="exin" v-if="notFollow">
			<view class="logo">
				<image src="/static/images/logobo.png" mode=""></image>
			</view>
			<view class="text">
				关注公众号可及时获取订单状态和技师信息
			</view>
			<view class="button" @click="goFollow">
				立即关注
			</view>
			<view class="close" @click="closeFollow">
				<fui-icon name="close" size="32"></fui-icon>
			</view>
		</view> -->
		<view class="swiper" :class="[{'not_follow':notFollow}]">
			<swiper class="swipers" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item @click="clickScroll(item)" v-for="(item,index) in imageArr" :key="index">
					<view class="imageBox">
						<image :src="item.image" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="tab_list">
			<view :class="[{active:index == cureent }]" v-for="(item,index) in tab_list" :key="index"
				@click="chexTab(index)">
				{{item.title}}
			</view>

		</view>
		<!-- <view class="content_title">推荐项目<font>RECOMMEND</font></view> -->
		<view class="content">
			<view class="content_item" v-for="(item,index) in recommendList" :key="index"
				@click.stop="goDetail(item.id)">
				<view class="left">
					<image :src="item.cover" mode=""></image>
				</view>
				<view class="right">
					<view class="title">
						<view class="name">
							{{item.name}}
							<text v-if="item.sex == 0 && item.tag_text != '' ">{{item.tag_text}}</text>
							<text v-if="item.sex != 0">{{item.sex_text}}</text>
						</view>
						<view class="count"><text>超过{{item.sales}}人选择</text></view>
					</view>
					<view class="function">
						<view class="desc_text">
							{{item.desc}}
						</view>
						<view class="convention" @click.stop="goTechnician(item.id)">选择技师</view>
					</view>
					<view class="bottom">
						<view class="price">￥<font>{{item.price}}</font><text class="cost">￥{{item.line_price}}</text>
						</view>
						<view class="time">
							<image style="width: 14px;height: 14px;margin-right: 2px;" src="/static/images/time.png"
								mode=""></image>
							<font>{{item.duration}}分钟</font>
						</view>

					</view>
				</view>
			</view>
		</view>
		<!-- <fui-dialog :show="show" title="立即关注公众号" color="#26c876" :content="content" :buttons="buttons" maskClosable @click="confirm" @close="cancel"></fui-dialog> -->
		<fui-landscape :show="show" position="3" maskClosable @close="cancel">
			<view class="land_container">
				<image class="fui-hd__img" @click.stop="confirm" :src="$store.state.config.index_coupon"
					mode="widthFix"></image>
			</view>
		</fui-landscape>

	</view>
	<view class="container" v-else>

	</view>
</template>

<script>
	import topTtile from "@/components/topTitle.vue"
	import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
	import fuiLandscape from "@/components/firstui/fui-landscape/fui-landscape.vue"
	import http from "../../common/http"
	export default {
		components: {
			topTtile,
			fuiIcon,
			fuiLandscape,
		},
		data() {
			return {
				loadding: false,
				userInfo: {},
				imageArr: [], //轮播图数组
				tab_list: [{
						'title': '综合排序',
						chex: true
					},
					{
						'title': '价格',
						chex: false
					},
					{
						'title': '销量',
						chex: false
					},
					// {
					// 	'title': '好评度',
					// 	chex: false
					// },
				],
				recommendList: [],
				contsList: [],
				page: 1,
				limit: 10,
				cureent: 0,
				notFollow: false,
				content: '可及时获取订单状态和技师信息',
				show: false,
				buttons: [{
						text: '不关注',
						color: '#ccc'
					},
					{
						text: '关注',
						color: '#26c876'
					},
				],
				is_login: false,
				force_login: false,
				couponList: [],
				city: ''
			}
		},
		onShow() {
			this.visitRecord()
			setTimeout(() => {
				// #ifndef APP-PLUS
				if (navigator.userAgent.toLowerCase().indexOf('micromessenger') != -1) {
					let notFollow = sessionStorage.getItem('not_follow');
					let is_follow = sessionStorage.getItem('is_follow')
					if (uni.getStorageSync('token') && this.userInfo.subscribe == 0) {
						this.is_follow = true;
					}
				}
				// #endif
			}, 1000)
		},
		onLoad(options) {

			console.log(this.$from(), '-----------------this.$from()')
			uni.setStorageSync('from', 'app')
			this.getForce()
			console.log(options, '-----------------------options')
			if (options.channel_id) {
				let channel_id = options.channel_id;
				let url = '';
				switch (channel_id) {
					case "1054":
						url = "https://url.wxedu.top/1054.html"
						break;
					case "1041":
						url = "https://url.wxedu.top/1041.html"
						break;
					case "1047":
						url = "https://url.wxedu.top/1047.html"
						break;
					default:
						break;
				}
				console.log(channel_id, '-------------123')
				// window.location.href = url;
			}
			if (!uni.getStorageSync('channel_id')) {
				let channel_id = options.channel_id || 0;
				uni.setStorageSync('channel_id', channel_id)
			}
			if (!uni.getStorageSync('spread_user_id')) {
				let spread_user_id = options.spread_user_id || 0;
				uni.setStorageSync('spread_user_id', spread_user_id)
			}
			//轮播图获取
			this.$http({
				url: '/api/group_data/home_banner',
				method: 'get',
				success: result => {
					console.log(result, '------------------------轮播图')
					if (result.code == 200) {
						this.imageArr = result.data.list
						this.imageArr.forEach((item, index) => {
							if (item.path == '/pages/index/index' || item.path ==
								'/pages/technician/index' || item.path == '/pages/orders/index' || item
								.path == '/pages/my/index') {
								item.isTabbar = true
							} else {
								item.isTabbar = false
							}
						})
					}
				}
			})
			// #ifdef H5
			navigator.geolocation.getCurrentPosition((res) => {
				this.latLon = {
					"latitude": res.coords.latitude,
					"longitude": res.coords.longitude,
				}
				this.getCity()
			}, function(error) {
				uni.hideLoading()
				uni.showToast({
					title: '加载失败,请刷新重试',
					icon: "none"
				})
			});
			// uni.getLocation({
			// 	type: 'gcj02',
			// 	highAccuracyExpireTime: 100,
			// 	success: (res) => {
			// 		console.log(res, '----------------------res1')
			// 		this.latLon = {
			// 			"latitude": res.latitude,
			// 			"longitude": res.longitude,
			// 		}
			// 		this.getCity()

			// 	},
			// 	fail: (err) => {
			// 		uni.hideLoading()
			// 		uni.showToast({
			// 			title: '加载失败,请刷新重试',
			// 			icon: "none"
			// 		})
			// 	}
			// })
			// #endif
			// #ifdef APP-PLUS
			this.getCity()
			// #endif
			let that = this;
			setTimeout(() => {
				this.loadding = true;
				uni.hideLoading()
			}, 1500)
			this.getConfig()
			this.getcategorylist()

		},
		methods: {
			getList() {
				console.log('地址', this.city)
				this.$http({
					url: `/api/product/list?page=${this.page}&limit=${this.limit}&city_name=${this.city}`,
					method: 'get',
					success: result => {
						console.log(result, this.city_name, 11111111111111)
						if (result.code == 200) {
							this.recommendList = result.data.list
							this.contsList = JSON.parse(JSON.stringify(this.recommendList))
						}
					}
				})
			},
			getCity() {
				let that = this;
				let locationType = '';
				if (uni.getSystemInfoSync().platform == 'android') { //android终端
					locationType = 'gcj02'
				} else if (uni.getSystemInfoSync().platform == "ios") { //ios终端
					locationType = 'wgs84'
				}
				// #ifdef H5
				uni.showLoading({
					title: '加载中..',
					duration: 1000
				})
				// let latLon = JSON.parse(uni.getStorageSync('latLon'))
				let latLon = this.latLon;
				let url = `https://apis.map.qq.com/ws/geocoder/v1/?location=`
				this.$jsonp(url, {
					key: 'QB3BZ-OTMRD-VTN4B-HOE6U-7IOZ6-AVFX4',
					location: `${latLon.latitude},${latLon.longitude}`,
					output: 'jsonp'
				}).then(res => {
					console.log(res, '-------------------------res2')
					console.log(`${latLon.latitude},${latLon.longitude}`, '------------当前经纬度')
					// uni.showModal({
					// 	title:'',
					// 	content:res.result.address
					// })
					if (res.status == 0) {
						setTimeout(() => {
							uni.hideLoading({
								success: result => {
									console.log(result, 'H5H5H5H5H5H5H5H5H5H5H5H5H5H5H5H5H5H5')
									if (res.result.address_component.city.indexOf('市')) {
										that.city = res.result.address_component.city.slice(0,
											res.result.address_component.city.length - 1)
									} else {
										that.city = res.result.address_component.city
									}
									this.getList()
									// that.city = '长沙市'
								}
							})
						}, 1000)

					}
				})
				// #endif
				// #ifdef MP-WEIXIN
				uni.authorize({
					scope: "scope.userLocation",
					success: () => {
						uni.showLoading({
							title: '获取地理位置中',
							duration: 1000
						})
						uni.getLocation({
							success: (result) => {
								let url = `https://apis.map.qq.com/ws/geocoder/v1/?location=`
								this.$jsonp(url, {
									key: 'QB3BZ-OTMRD-VTN4B-HOE6U-7IOZ6-AVFX4',
									location: `${result.latitude},${result.longitude}`,
									output: 'jsonp'
								}).then(res => {
									if (res.status == 0) {
										setTimeout(() => {
											uni.hideLoading({
												success: result => {
													that.city = res
														.result
														.address_component
														.city
													// that.city = '长沙市'
													this.getList()
												}
											})
										}, 1000)

									}
								})
							}
						})
					}
				})
				// #endif
				// #ifdef APP-PLUS
				uni.getLocation({
					type: locationType,
					success: function(res) {
						console.log('当前经度：' + res.longitude);
						console.log('当前纬度：' + res.latitude);
						that.reverseGeocoding(res.longitude, res.latitude)
					},
					fail: function(error) {
						console.error('获取地理位置失败', error);
					}
				});
				// #endif
			},
			reverseGeocoding(longitude, latitude) {
				uni.request({
					url: 'https://apis.map.qq.com/ws/geocoder/v1/',
					method: 'GET',
					data: {
						location: `${latitude},${longitude}`,
						key: 'QB3BZ-OTMRD-VTN4B-HOE6U-7IOZ6-AVFX4', // 替换成你申请的腾讯地图API Key
						get_poi: 1,
					},
					success: (res) => {
						// res.data 包含了逆地理编码的结果
						console.log('逆地理编码结果', res.data);
						uni.setStorageSync('address', res.data.result.address_component.city);
						this.city = res.data.result.address_component.city
						this.getList()
					},
					fail: (err) => {
						console.error('逆地理编码失败', err);
					},
				});
			},
			//获取系统配置
			getConfig() {
				this.$http({
					url: '/api/config',
					method: 'get',
					success: result => {
						console.log(result, '-************************/api/config')
						console.log(this.$store.state)
						this.$store.state.config = result.data
						this.getCouponList()
					}
				})
			},
			//获取可领取优惠券列表
			getCouponList() {
				this.$http({
					url: '/api/coupon/list',
					method: 'get',
					success: result => {
						console.log(result, '--------------可领取优惠券列表')
						let data = result.data.list
						if (data.length > 0) {
							this.show = true;
							data.forEach((item, index) => {
								this.couponList.push(item.id)
							})
						}
					}
				})
			},
			getLocation() {
				navigator.geolocation.getCurrentPosition((position) => {
					console.log('1------------------', `已打开定位${position}`);
				}, (err) => {
					console.log('21------------------' + err.code);
					if (err.code == 1) {
						this.getLocation()
					}
				}, {
					enableHighAcuracy: true, //位置是否精确获取
					timeout: 5000, //获取位置允许的最长时间 
					maximumAge: 0 //多久更新获取一次位置
				})
			},
			//用户访问日志
			visitRecord() {
				// #ifdef H5
				navigator.geolocation.getCurrentPosition((res) => {
					this.$http({
						url: '/api/view_log',
						method: 'post',
						data: {
							page: 1,
							latitude: res.coords.latitude,
							longitude: res.coords.longitude
						},
						success: result => {
							console.log(result)
						}
					})
				}, function(error) {
					uni.showToast({
						title: '加载失败,请刷新重试',
						icon: "none"
					})
				});
				
				// uni.getLocation({
				// 	type: 'gcj02',
				// 	isHighAccuracy: true,
				// 	highAccuracyExpireTime: 3000,
				// 	success: (res) => {
				// 		this.$http({
				// 			url: '/api/view_log',
				// 			method: 'post',
				// 			data: {
				// 				page: 1,
				// 				latitude: res.latitude,
				// 				longitude: res.longitude
				// 			},
				// 			success: result => {
				// 				console.log(result)
				// 			}
				// 		})
				// 	},
				// })
				// #endif
				// #ifdef APP-PLUS
				let locationType = '';
				if (uni.getSystemInfoSync().platform == 'android') { //android终端
					locationType = 'gcj02'
				} else if (uni.getSystemInfoSync().platform == "ios") { //ios终端
					locationType = 'wgs84'
				}
				uni.getLocation({
					type: locationType,
					success: (res) => {
						this.$http({
							url: '/api/view_log',
							method: 'post',
							data: {
								page: 1,
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: result => {
								console.log(result)
							}
						})
					},
				})
				// #endif
			},
			//强制登录配置
			getForce() {
				this.$http({
					url: '/api/config',
					method: 'get',
					success: result => {
						console.log(result, '------------------------getForce')
						// this.force_login = result.data.force_login
						this.force_login = false;
						this.phone_login = result.data.phone_login

						this.getUserInfo(this.is_login, this.force_login)
					}
				})
			},
			//获取用户信息
			getUserInfo(loginType, forceType) {
				this.$http({
					url: '/api/user/info',
					method: 'get',
					data: {
						is_login: loginType,
						is_force: forceType
					},
					success: result => {
						console.log(result, '------------------userInfo')
						if (result.code == 200) {
							this.userInfo = result.data.info
							uni.setStorageSync('userInfo', JSON.stringify(this.userInfo))
						}
					}
				})
			},
			//关闭顶部横栏
			closeFollow() {
				console.log('123')
				sessionStorage.setItem('not_follow', true)
				this.notFollow = false;
			},
			//关注
			goFollow() {
				window.location.href =
					"https://mp.weixin.qq.com/s?__biz=MzkxOTQyMzMyOQ==&mid=2247484139&idx=1&sn=954c991df9762d5775ae82a4883538d5&chksm=c1a312e5f6d49bf3e8c63cf1dbd5c26e569a05b821284a7be541d0b4aac0cee0011fa30cc8a7#rd"
			},
			//弹窗按钮
			confirm(e) {
				this.$http({
					url: '/api/coupon/receive',
					method: 'post',
					data: {
						ids: this.couponList
					},
					success: result => {
						console.log(result)
						uni.showToast({
							title: result.msg,
							icon: "none"
						})
					}
				})
				this.show = false;
			},
			cancel() {
				this.show = false;
			},
			getcategorylist() {
				this.$http({
					url: '/api/category/list',
					success: result => {
						console.log(result, 'getcategorylist')
					}
				})
			},
			//轮播图点击
			clickScroll(data) {
				console.log(data, '-------------------------data')
				if (data.path == "") return false;
				if (data.isTabbar) {
					uni.reLaunch({
						url: data.path
					})
				} else {
					if (data.path[0] == "/") {
						uni.navigateTo({
							url: data.path
						})
					} else {
						return false;
						// #ifdef H5 
						window.location.href = data.path;
						// #endif
						// #ifdef APP-PLUS
						uni.navigateTo({
							url: '/pages/webview/webview?src=' + data.path
						})
						// #endif
					}
				}
			},
			chexTab(i) {
				console.log(this.contsList, '---------------------const')
				this.cureent = i
				this.tab_list.forEach((item, index) => {
					if (i == index) {
						item.chex = !item.chex
					}
				})
				if (i == 0) {
					this.recommendList = JSON.parse(JSON.stringify(this.contsList))
				}
				if (i == 1 && this.tab_list[i].chex) {
					this.recommendList.sort((a, b) => {
						return a.price - b.price
					})
				} else if (i == 1 && !this.tab_list[i].chex) {
					this.recommendList.sort((a, b) => {
						return b.price - a.price
					})
				}
				if (i == 2) {
					this.recommendList.sort((a, b) => {
						return b.sales - a.sales
					})
				}

			},
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/index/project/Detail?id=' + id,
				})
			},
			goTechnician(id) {
				uni.reLaunch({
					url: `/pages/technician/index?id=${id}`
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	/deep/.uni-swiper {
		height: 400upx;
	}

	/deep/.uni-swiper-wrapper {
		width: 100%;
		height: 400upx;

		.imageBox {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		font-size: 14px;

		.not_follow {
			margin-top: 50px;
		}

		.exin {
			width: 100%;
			// height: 50px;
			z-index: 999;
			padding: 10rpx;
			box-sizing: border-box;
			background: #fff;
			color: #666;
			position: fixed;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 23upx;

			>.logo {
				width: 62rpx;
				height: 62rpx;

				>image {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				flex: 1;
				padding-left: 10rpx;
			}

			.button {
				margin-right: 10rpx;
				background: #26c876;
				padding: 1px 20rpx;
				border-radius: 40rpx;
				color: #fff;
				font-size: 22rpx;
			}

			.close {
				justify-content: flex-end;
			}
		}

		.swiper {
			padding: 0;
			width: 100%;
			height: 400upx;
		}

		.tab_list {
			width: 94%;
			height: 90upx;
			line-height: 90upx;
			margin: 0 auto;
			border-radius: 30upx;
			background: #fff;
			z-index: 99;
			position: absolute;
			left: 3%;
			top: 360rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			font-size: 25upx;
			font-weight: 400;

			>view {
				color: #2e2e2e;
				opacity: 0.5;
			}

			>view.active {
				color: #2E2E2E;
				font-size: 14px;
				opacity: 1;
				border-bottom: 3px solid #2EF1B5;
			}
		}

		.content_title {
			margin: 62px 0 17px 17px;
			font-size: 40upx;
			color: #2E2E2E;
			font-weight: bold;

			>font {
				font-size: 17px;
				color: #2E2E2E;
				opacity: 0.45;
			}
		}

		.content {
			flex: 1;

			margin-top: 180rpx;
			// overflow-y: auto;
			padding: 0 20upx 90upx 20upx;
			box-sizing: border-box;
			line-height: 48upx;

			.content_item:first-child {
				border-radius: 0 0 15upx 15upx;
			}

			>.title {
				width: 100%;
				height: 100px;
				background: pink;
				display: flex;
				flex-direction: column;

				>text {
					width: 100%;
					height: 50px;
					font-size: 36px;
				}
			}

			.content_item {
				display: flex;
				align-items: center;
				justify-content: space-around;
				background: #fff;
				border-radius: 15upx;
				margin-bottom: 15upx;

				.left {
					// width: 30%;
					width: 180upx;
					height: 130upx;
					margin: 16upx 15upx;

					>image {
						width: 100%;
						height: 100%;
						border-radius: 10upx;
					}
				}

				.right {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					padding-bottom: 5px;

					.title {
						font-size: 29upx;
						font-weight: bold;
						height: 20%;
						margin-top: 14upx;
						overflow: hidden;
						flex-wrap: nowrap;
						display: flex;
						align-items: center;
						justify-content: space-between;

						>.name {
							>text {
								font-size: 12upx;
								background-color: #eafff0;
								color: #26c876;
								padding: 2upx 4upx;
								border-radius: 15upx;
								margin-left: 10upx;
							}
						}

						>.count {
							>text {
								margin-right: 5px;
								font-size: 10px;
								color: #999;
								font-weight: 400;
							}
						}
					}

					.function {
						color: #666;
						// height: 40%;
						margin-top: 5upx;
						display: flex;
						justify-content: space-between;

						>text {
							margin-right: 5upx;
							font-size: 10upx;
						}

						.convention {
							padding: 5upx;
							background: #26c876;
							border-radius: 10upx;
							color: #fff;
							// margin-top: 15px;
							// margin-bottom: 12px; 
							margin-right: 7px;
						}
					}

					.bottom {
						display: flex;
						height: 20%;
						align-items: center;

						// justify-content: s;
						.price {
							color: #fd5c5b;
							font-weight: bold;
							// margin-top: 33px;
							// flex: 1;
							display: flex;
							align-items: baseline;

							>font {
								font-size: 17px;
							}

							.cost {
								font-size: 10px;
								text-decoration: line-through;
								font-weight: 400;
								color: #666;
								margin-left: 10rpx;
							}
						}

						.time {
							vertical-align: middle;
							align-items: center;
							// margin-top: 33px;
							font-size: 10px;
							display: flex;
							margin-left: 30rpx;
						}

					}
				}
			}
		}
	}

	/deep/.fui-dialog__inner {
		width: 520upx;
	}

	/deep/.fui-dialog__title {
		// display: none;
	}

	/deep/.fui-dialog__btn {
		font-size: 32upx !important;
	}

	/deep/.fui-dialog__btn-first {
		font-weight: normal;
	}

	/deep/.fui-dialog__body {
		// padding-top: 70upx;
	}

	.land_container {
		.receive {
			margin-top: 20upx;
			text-align: center;
		}
	}
</style>